{% extends "base_generic.html" %}

{% block content %}
  <div class="detail-header">
    <h1><i class="fas fa-thumbs-up me-2"></i>为您推荐</h1>
    {% if user.is_authenticated %}
      <p class="lead">根据您的阅读偏好为您推荐的图书</p>
    {% else %}
      <p class="lead">热门推荐图书</p>
    {% endif %}
  </div>
  
  {% if user.is_authenticated and not user.profile.reading_preferences.exists %}
    <div class="alert alert-info mb-4">
      <i class="fas fa-info-circle me-2"></i>设置您的阅读偏好可以获得更精准的推荐。
      <a href="{% url 'profile' %}" class="alert-link">前往设置</a>
    </div>
  {% endif %}
  
  <div class="row">
    {% for book in recommended_books %}
      <div class="col-md-4 col-lg-3 mb-4">
        <div class="book-card">
          <div class="book-card-img">
            {% if book.cover %}
              <img src="{{ book.cover.url }}" alt="{{ book.title }}">
            {% else %}
              <div class="d-flex align-items-center justify-content-center h-100">
                <i class="fas fa-book fa-3x"></i>
              </div>
            {% endif %}
          </div>
          <div class="book-card-body">
            <h5 class="book-card-title">{{ book.title }}</h5>
            <p class="book-card-author">{{ book.author }}</p>
            
            <div class="book-card-rating">
              {% with ''|center:book.avg_rating|floatformat:0|default:0 as range %}
                {% for _ in range %}
                  <i class="fas fa-star"></i>
                {% endfor %}
              {% endwith %}
              <span>({{ book.avg_rating|floatformat:1|default:"0.0" }})</span>
            </div>
            
            <p class="book-card-genres">
              {% for genre in book.genre.all %}
                <span class="badge bg-secondary">{{ genre }}</span>
              {% endfor %}
            </p>
            
            <div class="d-flex justify-content-between align-items-center mt-3">
              <a href="{{ book.get_absolute_url }}" class="btn btn-primary btn-sm">查看详情</a>
              <div>
                <span class="me-2"><i class="fas fa-heart"></i> {{ book.total_favorites }}</span>
                <span><i class="fas fa-thumbs-up"></i> {{ book.total_likes }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% empty %}
      <div class="col-12">
        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>暂无推荐图书，请尝试借阅或收藏一些图书以获得推荐。
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %} 